<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=graph-simple&lang=ts
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
      <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
      <div id="main">信令服务器：
            <select id="selectServer" onchange="optionServer()">
                  <option value="http://192.168.31.243:30881">http://192.168.31.243:30881</option>
                  <option value="http://106.14.24.198:80/av">http://106.14.24.198:80/av</option>
                  <option selected value="http://localhost:8881">http://localhost:8881</option>
            </select>
      </div>
      <div id="main">每台服务器人数上限：
            <select id="selectParticipant" onchange="optionParticipantChange()">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="20">20</option>
            </select>
      </div>
      <div id="main">负载均衡策略：
            <select id="selectLoadDistributionStrategy" onchange="optionLoadDistributionStrategyChange()">
                  <option value="1">同房间优先分配同一个服务器</option>
                  <option value="2">优先分配空闲服务器</option>
                  <option value="3">优先根据IM分配服务器(未实现)</option>
                  <option value="4">优先根据地域分配服务器(未实现)</option>
            </select>
      </div>
      <div id="main">是否共享流（实验功能）：
            <select id="selectIsShareStream" onchange="optionIsShareStream()">
                  <option value=true>是</option>
                  <option value=false>否</option>
            </select>
      </div>
      <div id="main">日志级别：
            <select id="selectLogLevel" onchange="optionputLogLevel()">
                  <option value="1">ERROR</option>
                  <option value="2">WARN</option>
                  <option value="3">INFO</option>
                  <option value="4">DEBUG</option>
                  <option value="5">TRACE</option>
            </select>
      </div>
      <div id="main">是否开启日志：
            <select id="selectIsLog" onchange="optionputIsLog()">
                  <option value=true>是</option>
                  <option value=false>否</option>
            </select>
      </div>
      <div id="container" style="height: 90%"></div>

      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
      <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/dataTool.min.js"></script>
        -->
      <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
      <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
      <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/map/js/world.js"></script>
        -->
      <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

      <script type="text/javascript">
            // url = 'http://192.168.31.243:30881'
            // url = 'http://106.14.24.198:80/av'
            url = 'http://localhost:8881'
            function optionServer(){
                  var opt = document.getElementById("selectServer")
                  var value = opt.options[opt.selectedIndex].value;
                  url = value;
            }
            function optionParticipantChange() {
                  var opt = document.getElementById("selectParticipant")
                  var value = opt.options[opt.selectedIndex].value;
                  putMaxParticipant(value)

            };
            function optionLoadDistributionStrategyChange() {
                  var opt = document.getElementById("selectLoadDistributionStrategy")
                  var value = opt.options[opt.selectedIndex].value;
                  putLoadDistributionStrategy(value)

            };
            function optionIsShareStream() {
                  var opt = document.getElementById("selectIsShareStream")
                  var value = opt.options[opt.selectedIndex].value;
                  putIsShareStream(value)

            };
            function optionputLogLevel() {
                  var opt = document.getElementById("selectLogLevel")
                  var value = opt.options[opt.selectedIndex].value;
                  putLogLevel(value)

            };
            function optionputIsLog() {
                  var opt = document.getElementById("selectIsLog")
                  var value = opt.options[opt.selectedIndex].value;
                  putIsLog(value)

            };
            function putMaxParticipant(num) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/putMaxParticipant/" + num, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {

                  }
            }
            function putLoadDistributionStrategy(num) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/putLoadDistributionStrategy/" + num, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {

                  }
            }
            function putIsShareStream(num) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/putIsShareStream/" + num, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {

                  }
            }
            function getMaxParticipant() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getMaxParticipant", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var maxParticipant = xmlhttp.responseText
                              var select = document.getElementById("selectParticipant");
                              for (i = 0; i < select.length; i++) {
                                    if (select[i].value == maxParticipant)
                                          select[i].selected = true;
                              }
                        }
                  }
            }
            function getLoadDistributionStrategy() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getLoadDistributionStrategy", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var maxParticipant = xmlhttp.responseText
                              var select = document.getElementById("selectLoadDistributionStrategy");
                              for (i = 0; i < select.length; i++) {
                                    if (select[i].value == maxParticipant)
                                          select[i].selected = true;
                              }
                        }
                  }
            }
            function getIsShareStream() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getIsShareStream", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var maxParticipant = xmlhttp.responseText
                              var select = document.getElementById("selectIsShareStream");
                              for (i = 0; i < select.length; i++) {
                                    if (select[i].value == maxParticipant)
                                          select[i].selected = true;
                              }
                        }
                  }
            }
            function getOption() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getOption", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var option = xmlhttp.responseText
                              const strToObj = JSON.parse(option)
                              myChart.setOption(strToObj);
                        }
                  }
            }
            
            function getNodeInfo(id) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getNodeInfo/"+id, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var option = xmlhttp.responseText
                              console.log(option)
                        }
                  }
            }

            function getLogLevel() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getLogLevel", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var maxParticipant = xmlhttp.responseText
                              var select = document.getElementById("selectLogLevel");
                              for (i = 0; i < select.length; i++) {
                                    if (select[i].value == maxParticipant)
                                          select[i].selected = true;
                              }
                        }
                  }
            }

            function getIsLog() {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/getIsLog", true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              var maxParticipant = xmlhttp.responseText
                              var select = document.getElementById("selectIsLog");
                              for (i = 0; i < select.length; i++) {
                                    if (select[i].value == maxParticipant)
                                          select[i].selected = true;
                              }
                        }
                  }
            }

            function putLogLevel(num) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/putLogLevel/" + num, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {

                  }
            }

            function putIsLog(num) {
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.open("GET", url + "/putIsLog/" + num, true);
                  xmlhttp.setRequestHeader("Content-Type", "application/json"); // 可以定义请求头带给后端
                  xmlhttp.send(null);  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
                  // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
                  xmlhttp.onreadystatechange = function () {

                  }
            }

            getMaxParticipant();
            getLoadDistributionStrategy();
            getIsShareStream();
            getIsLog();
            getLogLevel();
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            myChart.getZr().on('click', params => {
                  id = params['topTarget']['style']['text'].split(":")[1]
                  if(id){
                        getNodeInfo(id);
                  }
            })
            var app = {};
            setInterval(getOption, 2000);
            setInterval(getMaxParticipant, 10000);
            setInterval(getLoadDistributionStrategy, 10000);
            setInterval(getIsShareStream, 10000);
      </script>
</body>

</html>